<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <div class="title">
          <img src="@/assets/icons/审核.png" alt="review" class="icon">
          <span>设备管理</span>
          <el-button class="filter-item" type="primary" icon="el-icon-edit" style="position: absolute; right: 0px; top: 0px;" @click="handleCreate">添加</el-button>
        </div>
      </el-col>
    </el-row>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="设备编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备归属" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.room }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.state ? '已借出' : '未借出' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.$index,scope.row)">编辑</el-button>
          <el-button v-if="!scope.row.state" size="mini" type="success" @click="handleLend(scope.$index,scope.row)">借出</el-button>
          <el-button v-else size="mini" type="success" @click="handleReturn(scope.$index,scope.row)">归还</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 450px; margin-left:50px;">
        <el-form-item label="设备编号">
          <el-input v-model="temp.id" type="number" />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model.number="temp.name" />
        </el-form-item>
        <el-form-item label="实验室编号">
          <el-input v-model.number="temp.room" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确认</el-button>
        <el-button v-else type="primary" @click="updateData">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findAllDevices, addDevice, updateDevice, lendDevice, returnDevice } from '@/api/device'
import waves from '@/directive/waves' // 水波纹指令

export default {
  name: 'MremTable',
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      listLoading: true,
      listQuery: {
        query: undefined
      },
      temp: {
        id: undefined,
        name: '',
        room: ''
      },
      searchBy: ['会议室编号', '会议室大小'],
      search: '',
      tip: '',
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      rules: {
        username: [{
          required: true,
          message: 'username is required',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      console.log(this.listQuery.query)
      if (!this.listQuery.query) {
        const res = await findAllDevices()
        this.list = res.data.data
        console.log(this.list)
      }
      setTimeout(() => {
        this.listLoading = false
      }, 0.7 * 1000)
    },
    handleFilter() {
      this.getList()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        name: '',
        room: ''
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const device = Object.assign({}, this.temp)
          addDevice(device).then(res => {
            if (res.data.code === 0) {
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.getList()
            }
          })
        }
      })
    },
    handleUpdate(index, row) {
      this.temp.id = row.id
      this.temp.name = row.name
      this.temp.room = row.room
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const device = Object.assign({}, this.temp)
          updateDevice(device).then(res => {
            if (res.data.code === 0) {
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
              this.getList()
            }
          })
        }
      })
    },
    handleLend(index, row) {
      lendDevice(row.id).then(res => {
        if (res.data.code === 0) {
          this.$notify({
            title: '成功',
            message: '借出成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }
      })
    },
    handleReturn(index, row) {
      returnDevice(row.id).then(res => {
        if (res.data.code === 0) {
          this.$notify({
            title: '成功',
            message: '归还成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }
      })
    }
  }
}

</script>

<style scoped>
.el-row {
  padding-bottom: 20px;
}
</style>

